import React, { useState, useEffect } from 'react';
import ComponentList from '@components/custom-components/component-list';

export default (props) => {
  const handleDragStart = (e) => {
    e.dataTransfer.setData('index', e.target.dataset.index);
  }
  return (
    <div className="components-box"
      onDragStart={(e)=>handleDragStart(e)}>
      {
        ComponentList.map((item,idx)=>{
          return (
            <div key={idx}
              draggable
              data-index={idx}
              className="item">
              <i className={`iconfont ${item.icon}`}></i>
              <span>{item.label}组件</span>
            </div>
          )
        })
      }
    </div>
  );
}

